<template>
	<view class="">
		<!-- 顶部导航 -->
		<fa-navbar title="问答详情"></fa-navbar>
		<view class="u-p-30 detail">
			<view class="tags" v-if="detail.tags">
				<u-tag
					v-for="(item, index) in detail.tags"
					:key="index"
					:text="item.name"
					class="u-m-r-10"
					:bg-color="theme.lightColor"
					:border-color="theme.faBorderColor"
					:color="theme.bgColor"
					mode="light"
					@click="navigateTag(item.id, 'question')"
				/>
			</view>
			<view class="title u-m-t-20 u-font-40" :style="[underline]">
				<view class="price-tag u-font-24" v-if="detail.price > 0">
					<u-icon v-if="detail.price > 0" name="rmb-circle" color="#f19049" size="28"></u-icon>
					<text>{{ detail.price }}</text>
				</view>
				<view class="price-tag u-font-24" v-if="detail.score > 0">
					<u-icon v-if="detail.score > 0" name="integral" color="#f19049" size="20"></u-icon>
					<text>{{ detail.score }}</text>
				</view>
				<text class="u-m-r-5" :style="[style]" v-text="detail.title"></text>
				<block v-if="detail.price > 0 && !detail.best_answer_id">
					<u-count-down
						v-if="!detail.is_reward_expired"
						:timestamp="detail.reward_remain_seconds"
						separator="zh"
						color="#fb5746"
						separator-color="#fb5746"
						font-size="25"
						separator-size="25"
					></u-count-down>
					<u-tag class="u-m-l-10" type="error" shape="circle" v-else text="悬赏已过期" />
				</block>
				<u-tag text="已关闭" v-if="detail.status == 'closed'" class="u-m-l-10" mode="dark" type="error" />
			</view>
			<view class="time u-m-t-20 u-m-b-20 u-flex" v-if="detail.create_date" @click="goUser(detail.user.id)">
				<u-avatar size="40" :src="detail.user.avatar"></u-avatar>
				<view class="u-p-l-15" v-text="detail.user.nickname"></view>
				<view class="u-p-l-15">
					发布于
					<text v-text="detail.create_date"></text>
				</view>
			</view>
			<u-notice-bar class="margin-tb-sm" padding="18rpx 0" :no-list-hidden="false" :show="thanksList.length > 0" :list="thanksList" mode="vertical" duration="4000" font-size="26" :volume-icon="false"></u-notice-bar>
			<view class="content_fmt">
				<u-parse
					:html="detail.content_fmt"
					@linkpress="navigate"
					:tag-style="vuex_parse_style"
					:domain="vuex_config.upload ? vuex_config.upload.cdnurl : ''"
				></u-parse>
			</view>
			<!--  -->
			<view class="u-flex u-text-center u-p-t-30">
				<view class="u-flex-6 u-border-right">
					<view class="u-p-b-10">关注者</view>
					<view class="text-bold" v-text="detail.followers"></view>
				</view>
				<view class="u-flex-6 u-border-left">
					<view class="u-p-b-10">被浏览</view>
					<view class="text-bold" v-text="detail.views"></view>
				</view>
			</view>
			<!--  -->
			<view class="u-flex u-m-t-50 u-text-center">
				<view class="u-m-r-10">
					<u-button
						hover-class="none"
						type="primary"
						size="mini"
						:custom-style="{ backgroundColor: btnBgColor(true), color: btnColor(true) }"
						@click="attention"
					>
						{{ detail.followed ? '已关注' : '关注问题' }}
					</u-button>
				</view>
				<u-button
					hover-class="none"
					type="primary"
					size="mini"
					:custom-style="{ backgroundColor: btnBgColor(false), color: btnColor(false), border: '1px solid ' + theme.faBorderColor }"
					@click="response(user.id != detail.user_id)"
				>
					{{ user.id != detail.user_id ? '我来回答' : '邀请回答' }}
				</u-button>
				<view class="u-flex-8 u-text-right"><u-icon name="more-dot-fill" @click="moreClick" size="40"></u-icon></view>
			</view>
		</view>

		<!-- 回答列表 -->
		<view class="u-p-30">
			<view class="comment">
				<view class="answer-nav u-flex u-border-bottom">
					<view class="u-flex-5">
						<text v-text="(answerList.length>detail.answers?answerList.length:detail.answers)"></text>
						个回答
					</view>
					<view class="u-flex-7 u-text-right">
						<text class="u-m-r-20" :style="[styleColor('default')]" @click="orderClick('default')">默认排序</text>
						<text :style="[styleColor('date')]" @click="orderClick('date')">按发布时间排序</text>
					</view>
				</view>
				<view class="" v-if="answerList.length && detail.id">
					<fa-answer-item
						:listData="answerList"
						ref="faAnswer"
						:detailId="id"
						:hasBast="bestAnswerList.length > 0"
						:questionUserId="detail.user_id"
						@update="updateQuestion"
					></fa-answer-item>
				</view>
				<wanl-empty width="240rpx" height="240rpx"  style="padding:0 0 20rpx 0;" v-if="!answerList.length" text="暂无回答,快来添加一个答案吧!"></wanl-empty>
			</view>
		</view>
		<!-- 撰写答案 -->
		<fa-write-answer :detail="detail" @toadd="addQuestion"></fa-write-answer>

		<!-- 问题操作条 -->
		<u-popup v-model="is_more" mode="bottom">
			<view>
				<u-grid class="u-p-t-30 u-p-b-30" :col="morelength" :border="false">
					<u-grid-item v-for="(item, index) in moreList" :key="index" @click="questionBarClick(index)">
						<block v-if="!index">
							<!-- #ifdef MP-WEIXIN || MP-BAIDU || MP-ALIPAY -->
							<button class="share-btn grid-text u-flex u-flex-wrap u-row-center" open-type="share">
								<u-icon :name="item.icon" :size="item.size"></u-icon>
								<view class="u-m-t-10" style="width: 100%;">分享</view>
							</button>
							<!-- #endif -->
							<!-- #ifdef APP-PLUS || H5 -->
							<button class="share-btn grid-text u-flex u-flex-wrap u-row-center">
								<u-icon :name="item.icon" :size="item.size"></u-icon>
								<view class="u-m-t-10" style="width: 100%;">分享</view>
							</button>
							<!-- #endif -->
						</block>
						<block v-else>
							<u-icon :name="item.icon" :size="item.size"></u-icon>
							<view class="grid-text u-m-t-15">{{ detail.status == 'closed' && index == 7 ? '开启' : item.text }}</view>
						</block>
					</u-grid-item>
				</u-grid>
				<u-gap height="3" bg-color="#f4f6f8"></u-gap>
				<view class="u-p-30 u-text-center" @click="cancel">取消</view>
			</view>
		</u-popup>
		<!-- 提示框 -->
		<u-modal v-model="show" :content="modal_content" :show-cancel-button="showCancel" @confirm="modalConfirm" title="温馨提示"></u-modal>
		<!-- 感谢 -->
		<fa-thanks @close="close" ref="faThank" :source_id="id" type="question"></fa-thanks>
		<!-- 举报 -->
		<fa-report ref="faReport" :source_id="jb_id" :type="jb_type"></fa-report>
		<!-- 追加悬赏 -->
		<view class="" v-if="detail.id">
			<fa-add-reward
				ref="faReward"
				:qprice="detail.price"
				:qscore="detail.score"
				:currency="detail.currency"
				:source_id="id"
				@update="getQuestionShow"
			></fa-add-reward>
		</view>
		<!-- 邀请回答 -->
		<fa-invite-answer v-model="inviteVal" :source_id="id" :fullurl="detail.fullurl"></fa-invite-answer>
		<!-- 更多配置 -->
		<fa-more-config ref="faMore" :styleObject="styleStr" :source_id="id" :flag="flag" @updateMore="getQuestionShow" type="question"></fa-more-config>
		<!-- 分享 -->
		<!-- #ifdef APP-PLUS -->
		<view class="" v-if="detail.title">
			<fa-app-share ref="faShare" :title="detail.title" :summary="detail.title" :imageUrl="detail.image" :href="detail.fullurl"></fa-app-share>
		</view>
		<!-- #endif -->
		<!-- 底部导航 -->
		<fa-tabbar></fa-tabbar>
	</view>
</template>

<script>
import { collection, attention, others, styleRest, tagClick } from '@/common/fa.mixin.js';
// #ifdef H5
import { weixinShare } from '@/common/fa.weixin.mixin.js';
// #endif
import {
	mapState
} from 'vuex';
export default {
	mixins: [
		collection,
		attention,
		others,
		styleRest,
		tagClick,
		// #ifdef H5
		weixinShare
		// #endif
	],
	computed: {
		...mapState(['user']),
		styleColor(type) {
			return type => {
				let color = this.order == type ? this.theme.bgColor : '#303133';
				let border = this.order == type ? '2px solid' + this.theme.bgColor : 'none';
				return { color: color, borderBottom: border, paddingBottom: '10rpx' };
			};
		},
		morelength() {
			return this.moreList.length <= 3 ? 3 : this.moreList.length <= 4 ? 4 : 5;
		}
	},
	data() {
		return {
			style: {},
			underline: {},
			peeppricelist: [],
			show: false,
			modal_content: '',
			showCancel: true,
			modal_status: 'closed',
			id: 0,
			detail: {},
			answerList: [],
			bestAnswerList: [],
			thanksList:[],
			order: 'default',
			is_more: false,
			styleStr: '',
			flag: '',
			jb_id: 0,
			jb_type: '',
			moreList: [
				{
					icon: 'share-fill',
					text: '分享',
					size: 50
				},
				{
					icon: 'bookmark-fill',
					text: '收藏',
					size: 45
				},
				{
					icon: 'heart-fill',
					text: '感谢',
					size: 45
				},
				{
					icon: 'warning-fill',
					text: '举报',
					size: 45
				}
			],

			content: '',
			page: 1,
			has_more: false,
			isAddMore: false,
			is_update: false,
			inviteVal: false
		};
	},
	onLoad(e) {
		let query = this.$Route.query || e || {};
		this.id = query.id || 0;
		//如果是管理员，追加操作条
		if (this.vuex_isAdmin) {
			this.moreList = this.moreList.concat([
				{
					icon: 'rmb-circle-fill',
					text: '追加悬赏',
					size: 50
				},
				{
					icon: 'edit-pen-fill',
					text: '补充问题',
					size: 50
				},
				{
					icon: 'trash-fill',
					text: '删除',
					size: 50
				},
				{
					icon: 'close',
					text: '关闭',
					size: 45
				},
				{
					icon: 'more-dot-fill',
					text: '更多',
					size: 50
				}
			]);
		}
	},
	onShow() {
		this.updateQuestion();
	},
	onHide() {
		uni.$emit('audioUpdate', '页面hide,停止');
	},
	methods: {
		close() {
			this.updateQuestion();
		},
		//采纳答案更新数据
		updateQuestion() {
			this.page = 1;
			this.is_update = true;
			this.getQuestionShow();
		},
		goUser(id) {
			if (!id) return;
			this.$wanlshop.to(`/pages/community/user/index?user_id=${id}`);
		},
		//排序
		orderClick(order) {
			this.order = order;
			let o = this.$util.getDb('order');
			if (o != '' && order == o) {
				return;
			}
			this.$util.setDb('order', order, 3);
			this.page = 1;
			this.is_update = true;
			this.get_answer_list();
		},
		//modal 确认按钮
		modalConfirm() {
			if (this.modal_status == 'closed') {
				this.getQuestionClose();
			} else if (this.modal_status == 'delete') {
				this.getQuestionDelete();
			}
		},
		//关闭问题
		getQuestionClose: async function() {
			let res = await this.$api.getQuestionClose({
				id: this.id
			});
			this.$u.toast(res.msg);
			if (!res.code) {
				return;
			}
			this.$set(this.detail, 'status', 'closed');
		},
		//开启问题
		getQuestionOpen: async function() {
			let res = await this.$api.getQuestionOpen({
				id: this.id
			});
			this.$u.toast(res.msg);
			if (!res.code) {
				return;
			}
			this.$set(this.detail, 'status', 'normal');
		},
		//删除问题
		getQuestionDelete: async function() {
			let res = await this.$api.getQuestionDelete({
				id: this.id
			});
			this.$u.toast(res.msg);
			if (!res.code) {
				return;
			}
			//标记通知列表更新
			this.$u.vuex('vuex_delete_question', true);
			this.$Router.back(1);
		},
		//关注问题
		attention() {
			if (this.detail.followed) {
				//取消
				this.goAttentionDelete(this.detail, 'question');
			} else {
				//关注
				this.goAttentionCreate(this.detail, 'question');
			}
		},
		//回答
		response(type) {
			if (type) {
				//我来回答
				uni.pageScrollTo({
					scrollTop: 9999999,
					duration: 10
				});
			} else {
				//邀请回答
				this.inviteVal = true;
			}
		},
		//获取问题详情
		getQuestionShow: async function() {
			let res = await this.$api.getQuestionShow({
				id: this.id
			});
			if (!res.code) {
				this.$u.toast(res.msg);
				return;
			}
			this.detail = res.data.question;
			// #ifdef MP-WEIXIN || MP-ALIPAY || MP-BAIDU
			this.$u.mpShare = {
				title: res.data.question.title
			};
			// #endif
			res.data.bestAnswerList.map(this.otherEach);
			this.bestAnswerList = res.data.bestAnswerList;
			let thanksList = []
			if(res.data.thanksList) {
				thanksList = res.data.thanksList.map(item=>{
					return item.reamrk
				})
			}
			this.thanksList = thanksList;
			//获取其他答案
			this.get_answer_list();
			//如果是自己发布追加
			if (!this.vuex_isAdmin && this.user.id == res.data.question.user_id && !this.isAddMore) {
				this.isAddMore = true;
				this.moreList = this.moreList.concat([
					{
						icon: 'rmb-circle-fill',
						text: '追加悬赏',
						size: 50
					},
					{
						icon: 'edit-pen-fill',
						text: '补充问题',
						size: 50
					},
					{
						icon: 'trash-fill',
						text: '删除',
						size: 50
					}
				]);
			}
			let result = this.getStyle(res.data.question.style);
			this.underline = result[0];
			this.style = result[1];

			// #ifdef H5
			if (this.$util.isWeiXinBrowser()) {
				this.wxShare({
					title: this.detail.title,
					desc: this.detail.content,
					link: window.location.href,
					img: this.detail.images_list.length > 0 ? this.detail.images_list[0] : ''
				});
			}
			// #endif
		},
		//获取更多的答案列表
		get_answer_list: async function() {
			let res = await this.$api.getAnswerList({
				id: this.id,
				page: this.page,
				order: this.order
			});
			if (!res.code) {
				this.$u.toast(res.msg);
				return;
			}
			res.data.data.map(this.otherEach);
			//合并最佳答案
			if (this.is_update) {
				this.answerList = [];
				this.is_update = false;
				this.answerList = [...this.bestAnswerList, ...res.data.data];
			} else {
				this.answerList = [...this.answerList, ...res.data.data];
			}
			this.has_more = res.data.current_page < res.data.last_page;
		},

		//追加其它属性值
		otherEach(item) {
			item.is_edit = false;
			item.is_show = false;
			item.is_get = false;
			item.comment_list = [];
		},
		//问题操作条事件
		questionBarClick(index) {
			this.is_more = false;
			switch (index) {
				case 0: //分享
					// #ifdef H5
					this.$util.uniCopy({
						content: window.location.href,
						success: () => {
							this.$u.toast('复制成功，请去粘贴发送给好友吧');
						},
						error: () => {
							console.error('复制失败！');
						}
					});
					// #endif
					//#ifdef APP-PLUS
					this.$refs.faShare.show();
					// #endif
					break;
				case 1: //收藏或取消收藏
					if (this.detail.collected) {
						this.goCollectionDelete(this.detail, 'question');
					} else {
						this.goCollectionCreate(this.detail, 'question');
					}
					break;
				case 2: //感谢
					this.$refs.faThank.show();
					break;
				case 3:
					this.jb_id = this.id;
					this.jb_type = 'article';
					this.$refs.faReport.show();
					break;
				case 4:
					this.$refs.faReward.show();
					break;
				case 5: //补充问题
					this.$wanlshop.to(`/pages/community/question/post?id=${this.id}&type=update`);
					break;
				case 6: //删除问题
					this.modal_status = 'delete';
					this.modal_content = '确认删除?';
					this.show = true;
					break;
				case 7: //关闭
					if (this.detail.status == 'closed') {
						//已关闭，要开启
						this.getQuestionOpen();
					} else {
						this.modal_status = 'closed';
						this.modal_content = '确认关闭此提问？如果当前为悬赏提问，关闭后悬赏金额将退回提问者余额账号！！';
						this.show = true;
					}
					break;
				case 8:
					this.getQuestionConfig();
					break;
			}
		}, //获取配置
		getQuestionConfig: async function() {
			let res = await this.$api.getQuestionConfig({
				id: this.id
			});
			if (!res.code) {
				this.$u.toast(res.msg);
				return;
			}
			if (res.data.question.style) {
				this.styleStr = res.data.question.style;
			}
			this.flag = res.data.question.flag;
			this.$refs.faMore.show();
		},
		//新增答案
		addQuestion(answer) {
			this.answerList.push(answer);
		}
	},
	onReachBottom() {
		if (this.has_more) {
			this.page++;
			this.get_answer_list();
		}
	}
};
</script>

<style lang="scss">
page {
	background: #f4f6f8;
}
.detail {
	background: #ffffff;
	box-shadow: 0px 0px 3px 0px rgba(0, 78, 255, 0.1);
	.time {
		color: $u-light-color;
	}
	.title text {
		-webkit-background-clip: text;
	}
	.content_fmt {
		line-height: 45rpx;
	}
}
.comment {
	background: #ffffff;
	box-shadow: 0px 0px 3px 0px rgba(0, 78, 255, 0.1);
	.answer-nav {
		padding: 30rpx;
	}
}

.price-tag {
	display: inline-block;
	color: #f19049;
	background-color: #fff8e5;
	padding: 4rpx 10rpx;
	border-radius: 6rpx;
	margin-right: 10rpx;
}
</style>
